import { CloseOutlined } from '@ant-design/icons';
import { Alert, Button, Space } from 'antd';
import { createStyles } from 'antd-style';
import React from 'react';
import useLocale from '../../../hooks/useLocale';

const useStyle = createStyles(({ token, css }) => {
  return {
    alert: css`
        height: ${token.alertHeight}px;
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 1000;
        border: none;
        border-radius: 0;
        background: linear-gradient(90deg, #fe8aff 0%, rgb(111, 179, 226) 66%, rgb(108, 87, 255) 100%);
        .ant-btn-color-link.ant-btn-variant-link{
            padding: 0;
        }
    `,
    message: css`
      color: #000;
      text-align: center;
    `,
  };
});

const locales = {
  cn: {
    content: '参与 WeaveFox「AI艺术家」大赛，赢 SEE Conf 门票与千元好礼',
    link: '立即前往',
  },
  en: {
    content:
      'Participate in the WeaveFox "AI Artist" contest to win SEE Conf tickets and thousands of prizes',
    link: 'Go to',
  },
};

const Index: React.FC<{ onClose: () => void }> = ({ onClose }) => {
  const { styles } = useStyle();
  const [locale] = useLocale(locales);

  return (
    <Alert
      classNames={{
        root: styles.alert,
        title: styles.message,
      }}
      closable={{
        closeIcon: <CloseOutlined />,
        onClose,
      }}
      title={
        <Space>
          {locale.content}
          <Button
            type="link"
            onClick={() => {
              window.open('https://weavefox.cn/?ref=seeconf2025&source=antdx', '_blank');
            }}
          >
            {locale.link}
          </Button>
        </Space>
      }
    />
  );
};

export default Index;
